<%@page import="net.groupme.gui.constants.VIEW_VOCABULARY"%>
<%@page import="net.groupme.gui.rendering.constants.RENDERING_CONSTANTS"%>
<%@page import="net.groupme.api.API_CONSTANTS"%>
<script type="text/javascript" language="javascript"><!--
/**
* Called by the ResourceVisualizationMenu to add a Tag to the Resource.
* @param the ID of the Resource the Tag should be added to
*/
var tagForResource;
var showDetailedView;
var addTagResourceID;
function addTag(resourceID){
	tagForResource = dwr.util.getValue("addTagToResourceField" + resourceID);
	addTagResourceID = resourceID;
	$("addTagToResourceField" + resourceID).clear();
	if(checkTagKeyword(tagForResource, "/") || checkTagKeyword(tagForResource, "\\") || checkTagKeyword(tagForResource, "?")){
   		dwr.util.setValue("addTagToGroupField", "Please enter a Tag");
   		alert("Tags may not contain /, ?, \\");
   	}
	else if (tagForResource!=null && tagForResource!=""){
		DWRGroupManager.addTagToResource(tagForResource, resourceID, reloadTags);
	}
} 

/**
* Checks wether the keyword contains the given character
 */
function checkTagKeyword(keyword, character){
   if(keyword.indexOf(character) == -1){
   		return false;
   }
   else{ 
   		return true;
   }
}

function reloadTags(tagarray){
	if (tagarray != null) {
		reloadTagCloud();
		if (tagarray.length == 0){
			return;
		}
		var idOfResourceTagsContainer = addTagResourceID + "_resourceTags";
		$('resourceTags').update("<a class=\"resourceTag\" href=\"<%= VIEW_VOCABULARY.RESTful_TAG_URI_PATTERN %>"
				+ tagarray[0]
				+ "\" title=\"Search for Groups and Resources tagged with "
				+ tagarray[0]
				+ ">" + tagarray[0] + "</a>");
		$(idOfResourceTagsContainer).update("<a class=\"resourceTag\" href=\"<%= VIEW_VOCABULARY.RESTful_TAG_URI_PATTERN %>"
				+ tagarray[0]
				+ "\" title=\"Search for Groups and Resources tagged with "
				+ tagarray[0]
				+ ">" + tagarray[0] + "</a>");	
		
		for (var i = 1; i < tagarray.length; i++){
			$(idOfResourceTagsContainer).update($(idOfResourceTagsContainer).innerHTML + " <a class=\"resourceTag\" href=\"<%= VIEW_VOCABULARY.RESTful_TAG_URI_PATTERN %>"
				+ tagarray[i]
				+ "\" title=\"Search for Groups and Resources tagged with "
				+ tagarray[i]
				+ ">" + tagarray[i] + "</a>");
			$('resourceTags').update($('resourceTags').innerHTML + " <a class=\"resourceTag\" href=\"<%= VIEW_VOCABULARY.RESTful_TAG_URI_PATTERN %>"
				+ tagarray[i]
				+ "\" title=\"Search for Groups and Resources tagged with "
				+ tagarray[i]
				+ ">" + tagarray[i] + "</a>");
			}
	}
	else {
		alert('Your session has expired.');
		window.location.reload();
		return;
	}
}
/**
* Loads the chosen group.
*/
function loadGroup(){
	var groupId = currentGroupId;
	if(groupId != 'default'){
		currentGroupId = groupId;
		DWRGroupManager.setGroup(groupId, null);
		$('exportRDF').href = "<%= VIEW_VOCABULARY.RESTful_GROUP_URI_PATTERN  %>" + currentGroupId +  "?<%= API_CONSTANTS.PARAMETER_OUTPUT + "=" + API_CONSTANTS.OUTPUT_RDF  %>";
		$('exportRSS').href = "/GroupMe/api/export.do?groupID=" + currentGroupId + "&mode=export-groups&export-format=rss";
		
		DWRGroupBrowsingManager.loadResources(groupId, $('group').offsetWidth, $('group').offsetHeight, loadResourcesIntoGroup);

	}
	else{
		// if no group id is set, the displayed group has to be empty espcially no tags, names or descriptions from the last group 
		//shold be displayed
		$("nameOfGroup").update("Explore the GroupMe! Groups");
		$("tagcloud").update("just click on a Group on the left to open it");
		$("descriptionText").update();
		$('rightButtons').setStyle({display:'none'});
	}
}
/**
* Loads formatted Resources into the GroupVisualization.
* @param an Array of the ResourceVisualizations of the group.
*/
function loadResourcesIntoGroup(unformattedResources) {
	showDetailedView = false;
	$('group').innerHTML = "";
	for(var i=0; i<unformattedResources.size(); i++){
		unformattedResource = unformattedResources[i];
	/** start rendering */
	/** _border with styles and global mousefunctioncalling */
		var resourceHTML = "<div id=\"" + unformattedResource.uri + "_border\" class=\"resourceVisualization\""
		+ " style = \""
		+ " width:" + (unformattedResource.relativeWidth +26) + "px;"
		+ " height:" + (unformattedResource.relativeHeight +24) + "px;"
		+ " left:" + (unformattedResource.relativeX) + "px;"
		+ " top:" + (unformattedResource.relativeY) + "px;"
		+ " z-index:" + unformattedResource.relativeZ + "\""
		+ " onmouseup=\"mouseUpOnResVisu('" + unformattedResource.uri + "_border', '" + unformattedResource.uri + "')\""
		+ " onmouseover=\"mouseOverResVisu('" + unformattedResource.uri + "')\""
		+ " onclick=\"mouseclickOnResVisu('" + unformattedResource.uri + "')\""
		+ " onmouseout=\"mouseOutResVisu('" + unformattedResource.uri + "')\">"
	/** _menu building */
		+ "<div id=\"" + unformattedResource.uri + "_menu\" class=\"resourceMenu\""
		
		// Hidden with placeholder
		//+ "style=\"visibility:hidden;\">";

		+ "style=\"display:none;\""
		+ ">";
		if (unformattedResource.name.length > 20) {
			resourceHTML += "<p"
			//Movement
			+ " Style='cursor:move'"
			+ " onmouseup=\"mouseUpOnResVisuMenu('" + unformattedResource.uri + "_border', '" + unformattedResource.uri + "')\""
			+ " onmousedown=\"mouseDownOnResVisuMenu('" + unformattedResource.uri + "')\""
			+ ">" + unformattedResource.name.substring(0, 18) + "...</p>";
		}
		else {
			resourceHTML += "<p"
			//Movement
			+ " Style='cursor:move'"
			+ " onmouseup=\"mouseUpOnResVisuMenu('" + unformattedResource.uri + "_border', '" + unformattedResource.uri + "')\""
			+ " onmousedown=\"mouseDownOnResVisuMenu('" + unformattedResource.uri + "')\""
			+ ">" + unformattedResource.name + "</p>";
		}
		resourceHTML += "<p style=\"font-size:0.7em\">"
	/** _menu items */	   			
		+ "<a id='" + unformattedResource.uri + "_details' href='#' "
		+ "onclick=\"return hs.htmlExpand(this, { src: '<%= VIEW_VOCABULARY.GROUPME_BASE_URL + VIEW_VOCABULARY.REQUEST_TYPE_RESOURCE_SMALL %>/" + unformattedResource.id + "', contentId: 'my-content', objectType: 'ajax', width: 600 } )\" title=\"view detailed informations for this resource\">"
		+ "<img src=\"<%= request.getContextPath() %>/images/tag_blue_add.gif\" height=\"12px\" width=\"12px\" style=\"text-decoration:none;border:none;\"/>details</a>"
		+ " | "
		+ "<a href=\"" + unformattedResource.url + "\" target=\"_blank\" title=\"open this Resource a in new window\">open</a>"
	/** Delete Button in Resources */
		<c:if test="${view == 'groupview'}">
			+ " | "
			+ "<a style=\"cursor:default;\" href=\"javascript:removeResourceFromGroup('" + unformattedResource.uri + "')\" title=\"delete this resource from this group\">X</a>" 
		</c:if>

		+ "</p>"
		+ "</div>"
		
	/** divs for background and rounded corners */
		+ "<table style=\"border: medium none; width: 100%; height: 100%; margin:0em; padding: 0em; border-collapse: collapse;\">"
		+ "	<tr style=\"border: medium none; width: 100%; height: 12px; margin:0em; padding: 0em\">"
		+ "		<td class=\"ol\" style=\"border: medium none; width: 13px; height: 12px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll top left; line-height: 0pt;\"></td>"
		+ "		<td class=\"om\" style=\"border: medium none; height: 12px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll 0px -40px; line-height: 0pt;\"></td>"
		+ "		<td class=\"or\" style=\"border: medium none; width: 13px; height: 12px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll -27px 0px; line-height: 0pt;\"></td>"
		+ "	</tr>"
		+ "	<tr style=\"border: medium none; width: 100%; margin:0em; padding: 0em\">"
		+ "		<td class=\"ml\" style=\"border: medium none; width: 13px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll 0px -80px; line-height: 0pt;\"></td>"
		+ "		<td class=\"mm\" style=\"border: medium none; margin:0em; padding: 0em; background: url(<%= request.getContextPath() %>/images/blue-bg.png) repeat scroll;\">"
	/** _container for resource content */
		+ "<div id=\"" + unformattedResource.uri + "\" class=\"resourceVisualizationContainer\"" 
		+ " style = \"height:" + unformattedResource.relativeHeight + "px\""
		+ " onmousedown=\"mouseDownOnResVisu('" + unformattedResource.uri + "')\">";
		
	/** content rendering */	
	/** image */
		if (unformattedResources[i].renderer == "<%=RENDERING_CONSTANTS.RENDERER_IMAGE%>"){
			renderImgResource(resourceHTML, unformattedResources[i]);					
		}
	/** default/webpage/HTML-content */
		if (unformattedResources[i].renderer == "<%=RENDERING_CONSTANTS.RENDERER_DEFAULT%>"){
			renderHTMLResource(resourceHTML, unformattedResources[i]);					
		}
	/** video */
		if (unformattedResources[i].renderer == "<%=RENDERING_CONSTANTS.RENDERER_VIDEO%>"){
			renderVideoResource(resourceHTML, unformattedResources[i]);					
		}
	/** shockwave/flash */
		if (unformattedResources[i].renderer == "<%=RENDERING_CONSTANTS.RENDERER_SHOCKWAVE%>"){
			renderShockwaveResource(resourceHTML, unformattedResources[i]);					
		}
	/** RSS-Feed */
		if (unformattedResources[i].renderer == "<%=RENDERING_CONSTANTS.RENDERER_RSS%>"){
			renderRSSResource(resourceHTML, unformattedResources[i]);					
		}
	/** Groupme-Group */
		if (unformattedResources[i].renderer == "<%=RENDERING_CONSTANTS.RENDERER_GROUP%>"){
			renderGroupResource(resourceHTML, unformattedResources[i]);					
		}
  	}
 }

/**
* Loads a new formatted Resources into the GroupVisualization.
* @param the new ResourceVisualization
*/
function loadResourceIntoGroup(unformattedResource) {
	if (unformattedResource == null) {
		alert('Either your session or your search has expired.');
		window.location.reload();
		return;
	}
	showDetailedView = false; //don't show detailed view when resource is dropped into a group
/** start rendering */
/** _border with styles and global mousefunctioncalling */
	var resourceHTML = "<div id=" + unformattedResource.uri + "_border class=\"resourceVisualization\""
	+ " style = \""
	+ " width:" + (unformattedResource.relativeWidth + 26) + "px;"
	+ " height:" + (unformattedResource.relativeHeight + 24) + "px;"
	+ " left:" + unformattedResource.relativeX + "px;"
	+ " top:" + unformattedResource.relativeY + "px;"
	+ " z-index:" + unformattedResource.relativeZ + "\""
	+ " onmouseup=\"mouseUpOnResVisu('" + unformattedResource.uri + "_border', '" + unformattedResource.uri + "')\""
	+ " onmouseover=\"mouseOverResVisu('" + unformattedResource.uri + "')\""
	+ " onclick=\"mouseclickOnResVisu('" + unformattedResource.uri + "')\""
	+ " onmouseout=\"mouseOutResVisu('" + unformattedResource.uri + "')\">"
/** _menu building */
	+ "<div id=\"" + unformattedResource.uri + "_menu\" class=\"resourceMenu\""
//	+ "style=\"visibility:hidden;\">";
	+ "style=\"display:none;\">";
	if (unformattedResource.name.length > 20) {
		resourceHTML += "<p"
		//Movement
		+ " Style='cursor:move'"
		+ " onmouseup=\"mouseUpOnResVisuMenu('" + unformattedResource.uri + "_border', '" + unformattedResource.uri + "')\""
		+ " onmousedown=\"mouseDownOnResVisuMenu('" + unformattedResource.uri + "')\""
		+ ">" + unformattedResource.name.substring(0, 18) + "...</p>";
	}
	else {
		resourceHTML += "<p"
		//Movement
		+ " Style='cursor:move'"
		+ " onmouseup=\"mouseUpOnResVisuMenu('" + unformattedResource.uri + "_border', '" + unformattedResource.uri + "')\""
		+ " onmousedown=\"mouseDownOnResVisuMenu('" + unformattedResource.uri + "')\""
		+ ">" + unformattedResource.name + "</p>";
	}
	resourceHTML += "<p style=\"font-size:0.7em\">"
/** _menu items */	   			
	+ "<a id='" + unformattedResource.uri + "_details' href='#' "
	+ "onclick=\"return hs.htmlExpand(this, { src: '<%= VIEW_VOCABULARY.GROUPME_BASE_URL + VIEW_VOCABULARY.REQUEST_TYPE_RESOURCE_SMALL %>/" + unformattedResource.id + "', contentId: 'my-content', objectType: 'ajax'} )\" title=\"view detailed informations for this resource\">"
	+ "<img src=\"<%= request.getContextPath() %>/images/tag_blue_add.gif\" height=\"12px\" width=\"12px\" style=\"text-decoration:none;border:none;\"/>details</a>"
	+ " | "
	+ "<a href=\"" + unformattedResource.url + "\" target=\"_blank\" title=\"open this Resource a in new window\">open</a>"
	/** Delete Button in Resources */
	+ " | "
	+ "<a style=\"cursor:default;\" href=\"javascript:removeResourceFromGroup('" + unformattedResource.uri + "')\" title=\"delete this resource from this group\">X</a>" 
	+ "</p>"
	+ "</div>"
	
/** divs for background and rounded corners  */
	+ "<table style=\"border: medium none; width: 100%; height: 100%; margin:0em; padding: 0em; border-collapse: collapse;\">"
	+ "	<tr style=\"border: medium none; width: 100%; height: 12px; margin:0em; padding: 0em\">"
	+ "		<td class=\"ol\" style=\"border: medium none; width: 13px; height: 12px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll top left; line-height: 0pt;\"></td>"
	+ "		<td class=\"om\" style=\"border: medium none; height: 12px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll 0px -40px; line-height: 0pt;\"></td>"
	+ "		<td class=\"or\" style=\"border: medium none; width: 13px; height: 12px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll -27px 0px; line-height: 0pt;\"></td>"
	+ "	</tr>"
	+ "	<tr style=\"border: medium none; width: 100%; margin:0em; padding: 0em\">"
	+ "		<td class=\"ml\" style=\"border: medium none; width: 13px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll 0px -80px; line-height: 0pt;\"></td>"
	+ "		<td class=\"mm\" style=\"border: medium none; margin:0em; padding: 0em; background: url(<%= request.getContextPath() %>/images/blue-bg.png) repeat scroll;\">"
			
/** _container for resource content */
	+ "<div id=\"" + unformattedResource.uri + "\" class=\"resourceVisualizationContainer\"" 
	+ " style = \"height:" + unformattedResource.relativeHeight + "px\""
	+ " onmousedown=\"mouseDownOnResVisu('" + unformattedResource.uri + "')\">";
	
/** content rendering */	
/** image */
	if (unformattedResource.renderer == "<%=RENDERING_CONSTANTS.RENDERER_IMAGE%>"){
		renderImgResource(resourceHTML, unformattedResource);					
	}
/** default/webpage/HTML-content */
	if (unformattedResource.renderer == "<%=RENDERING_CONSTANTS.RENDERER_DEFAULT%>"){
		renderHTMLResource(resourceHTML, unformattedResource);					
	}
/** video */
	if (unformattedResource.renderer == "<%=RENDERING_CONSTANTS.RENDERER_VIDEO%>"){
		renderVideoResource(resourceHTML, unformattedResource);					
	}
/** shockwave/flash */
	if (unformattedResource.renderer == "<%=RENDERING_CONSTANTS.RENDERER_SHOCKWAVE%>"){
		renderShockwaveResource(resourceHTML, unformattedResource);					
	}
/** RSS-Feed */
	if (unformattedResource.renderer == "<%=RENDERING_CONSTANTS.RENDERER_RSS%>"){
		renderRSSResource(resourceHTML, unformattedResource);					
	}
/** Groupme-Group */
	if (unformattedResource.renderer == "<%=RENDERING_CONSTANTS.RENDERER_GROUP%>"){
		renderGroupResource(resourceHTML, unformattedResource);					
	}
 }

/** rendering function for different content types */
function renderImgResource(resourceImgHTML, unformattedResource) {
	resourceImgHTML += "<img class=\"resourceIMG\" style=\"width: " + (unformattedResource.relativeWidth) + "px;\""
	+ " id=\"" + unformattedResource.uri + "_content" + "\" src=\"" + unformattedResource.url + "\""
	+ " alt=\"" + unformattedResource.name + "\"/>";
	finishRendering(resourceImgHTML, unformattedResource);
}

function renderHTMLResource(resourceHTML, unformattedResource) {
	resourceHTML += "<div id=\"" + unformattedResource.uri + "_content\" class=\"resourceDefault\" style=\"width: " + (unformattedResource.relativeWidth-18) + "px;\">"
	+ "<strong>" + unformattedResource.name + "</strong><br/>";
	if(unformattedResource.description != null){
		resourceHTML +=  "Description: " + unformattedResource.description;
	}
	if(unformattedResource.url != null){
		resourceHTML += "<br/>URL: <a href=\"" + unformattedResource.url +"\" target=\"_blank\""+ "\" title=\"visit resource @ " + unformattedResource.url +"\">"
			 + unformattedResource.url.substring(0, 20)
			 + "</a>";
	}
	// close div _content
	resourceHTML += "</div>";
	
	finishRendering(resourceHTML, unformattedResource);
}
 		
function renderVideoResource(resourceVideoHTML, unformattedResource) {
	resourceVideoHTML += "<object id=\"" + unformattedResource.uri + "_contentVideo\" class=\"resourceVideo\""
	+ "style=\"width: " + unformattedResource.relativeWidth + "px; height: " + unformattedResource.relativeHeight + "px\""
	+ "classid=\"CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6\" " 
	+ "codebase=\"http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701\" "
	+ "standby=\"Loading Microsoft Windows Media Player components...\" >"
	+ "<param name=\"URL\" value=\"" + unformattedResource.url + "\">"
	+ "<param name=\"SendPlayStateChangeEvents\" value=\"True\">"
	+ "<param name=\"AutoStart\" value=\"false\">"
	+ "<param name=\"stretchToFit\" value=\"true\">"
	+ "<param name=\"uiMode\" value=\"full\">"
	+ "<param name=\"PlayCount\" value=\"1\">"
	+ "<param name=\"AutoRewind\" value=\"0\">"
	+ "<param name=\"AutoSize\" value=\"0\">"
	+ "<embed id=\"" + unformattedResource.uri + "_contentVideoembedded\" type=\"application/x-mplayer2\" "
	+ "pluginspage=\"http://www.microsoft.com/Windows/MediaPlayer/\" "
	+ "name=\"mediaplayer1\" transparentstart=\"1\" "
	+ "style=\"width: " + unformattedResource.relativeWidth + "px; height: " + unformattedResource.relativeHeight + "px\""
	+ "showstatusbar=\"1\" loop=\"0\" controller=\"true\" src=\"" + unformattedResource.url + "\" stretchToFit=\"true\" AutoSize=\"0\" Autostart=\"false\"></embed>"
	+ "</object>";

	finishRendering(resourceVideoHTML, unformattedResource);
}


function renderShockwaveResource(resourceShockwaveHTML, unformattedResource) {
	vidurl = unformattedResource.url;
	if (vidurl.search(/v=/) != -1){
		vidId = vidurl.substring(vidurl.indexOf("v=")+2);
		if(vidId.indexOf("&") != -1){
			vidId = vidId.substring(0, vidId.indexOf("&"));
		}
		vidurl = "http://www.youtube.com/v/" + vidId;
	}
	resourceShockwaveHTML += "<br/><object class=\"resourceVideo\">"
	+ "<param name=\"movie\" value=\"" + vidurl  + "\"></param>"
	+ "<param name=\"wmode\" value=\"transparent\"></param>"
	+ "<embed id=\"" + unformattedResource.uri + "_contentVideo\" src=\"" + vidurl + "\" "
	+ "type=\"application/x-shockwave-flash\" wmode=\"transparent\" style=\"width: " + unformattedResource.relativeWidth + "px; height: " + (unformattedResource.relativeHeight-18) + "px\">"
	+ "</embed>"
	+ "</object>";

	finishRendering(resourceShockwaveHTML, unformattedResource);
}

function renderRSSResource(resourceRSSHTML, unformattedResource) {
	resourceRSSHTML += "<div id=\"" + unformattedResource.uri + "_content\" class=\"resourceRSS\" style=\"width: " + unformattedResource.relativeWidth + "px;\">";
	DWRGroupBrowsingManager.getRenderedContentForRSSResource(unformattedResource.tags, resourceRSSHTML, unformattedResource.url, unformattedResource.uri, unformattedResource.name, unformattedResource.id, renderRSSResourceCallback);
}

function renderRSSResourceCallback(unformattedResource) {
	var resourceRSSHTML = unformattedResource.html;
	resourceRSSHTML += "</div>";
	
	finishRendering(resourceRSSHTML, unformattedResource);
}

function renderGroupResource(resourceRSSHTML, unformattedResource) {
	resourceRSSHTML += "<div id=\"" + unformattedResource.uri + "_content\" class=\"resourceRSS\" style=\"width: " + unformattedResource.relativeWidth + "px;\">";
	DWRGroupBrowsingManager.getRenderedContentForGroupResource(unformattedResource.tags, resourceRSSHTML, unformattedResource.url, unformattedResource.uri, unformattedResource.id,  unformattedResource.name, renderGroupResourceCallback);
}

function renderGroupResourceCallback(unformattedResource) {
	var resourceRSSHTML = unformattedResource.html;
	resourceRSSHTML += "</div>";
	finishRendering(resourceRSSHTML, unformattedResource);
}

function finishRendering(resourceHTML, unformattedResource){
	resourceHTML += "</div>"
	+ "		</td>"
	+ "		<td class=\"mr\" style=\"border: medium none; width: 13px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll -27px -80px; line-height: 0pt;\"></td>"
	+ "	</tr>"
	+ "	<tr style=\"border: medium none; width: 100%; height: 12px; margin:0em; padding: 0em\">"
	+ "		<td class=\"ul\" style=\"border: medium none; width: 13px; height: 12px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll 0px -28px; line-height: 0pt;\"></td>"
	+ "		<td class=\"um\" style=\"border: medium none; height: 12px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll 0px -68px; line-height: 0pt;\"></td>"
	+ "		<td class=\"ur\" style=\"border: medium none; width: 13px; height: 12px; margin:0em; padding: 0em; background: transparent url(<%= request.getContextPath() %>/images/rounded-blue.png) repeat scroll -27px -28px; line-height: 0pt; vertical-align:top;\">"
	+ " <div style=\"width:15px; height: 15px; margin-left:-2px; margin-top:-3px; cursor:nw-resize; background-repeat: no-repeat; background-image:url(<%= request.getContextPath() %>/images/resize2_gm.png)\""
	+ " 	onmouseup=\"mouseUpOnResVisu('" + unformattedResource.uri + "_border', '" + unformattedResource.uri + "')\""
	+ " 	onmousedown=\"resize1('" + unformattedResource.uri + "', event)\"></div>"
	+ " </td>"
	+ "	</tr>"
	+ "</table>"
	 
	/** _tags building */
	+ "<div id=\"" + unformattedResource.uri + "_tags_container\" class=\"resourceTags_container\""
	+ "style=\"visibility:hidden;\">"
	+ "<div id=\"" + unformattedResource.uri + "_tags_left\" class=\"resourceTags_left\"></div>"
	+ "<div id=\"" + unformattedResource.uri + "_tags_right\" class=\"resourceTags_right\">"
	+ "<div id=\"" + unformattedResource.id + "_resourceTags\" class=\"resourceTags\">";
	for (var i = 0; i < unformattedResource.tags.length; i++) {
		resourceHTML += "<a class=\"resourceTag\" href=\"<%=VIEW_VOCABULARY.RESTful_TAG_URI_PATTERN%>" 
					 + unformattedResource.tags[i] + "\"" 
				     + " title=\"Search for groups and resources tagged with " + unformattedResource.tagKeywords[i] + "\">" 
					 + unformattedResource.tagKeywords[i] + "</a> ";
	}
	resourceHTML += "</div>"
	+ "</div>"
	+ "</div>"
	+ "</div>"
	/** close div _border */
	+ "</div>";
	addToGroup(resourceHTML, unformattedResource.uri + "_details");
}

function addToGroup(addedResourceRenderedAsHTML, details_element) {
	$('group').update($('group').innerHTML + addedResourceRenderedAsHTML);
	if (showDetailedView) $(details_element).onclick();
}
//-->
</script>